<template>
  <view class="rank-container">
    <view class="rank-list">
      <view
        v-for="(item, index) in rankList"
        :key="item.id"
        :class="['rank-item', {'top1': index === 0, 'top2': index === 1, 'top3': index === 2}]"
      >
        <view class="rank-index">
          <template v-if="index === 0">
            <image src="/static/crown-gold.png" class="crown"/>
          </template>
          <template v-else-if="index === 1">
            <image src="/static/crown-silver.png" class="crown"/>
          </template>
          <template v-else-if="index === 2">
            <image src="/static/crown-bronze.png" class="crown"/>
          </template>
          <template v-else>
            <text>{{ index + 1 }}</text>
          </template>
        </view>
        <image :src="item.avatar" class="avatar"/>
        <view class="nickname">{{ item.nickname }}</view>
        <view class="score">{{ item.score }}分</view>
      </view>
    </view>
  </view>
</template>

<script setup>
const avatarUrl = 'https://img1.baidu.com/it/u=3860723820,4037325918&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
const rankList = [
  { id: 1, nickname: '小明', score: 320, avatar: avatarUrl },
  { id: 2, nickname: '小红', score: 300, avatar: avatarUrl },
  { id: 3, nickname: '小刚', score: 280, avatar: avatarUrl },
  { id: 4, nickname: '小李', score: 260, avatar: avatarUrl },
  { id: 5, nickname: '小王', score: 240, avatar: avatarUrl },
  { id: 6, nickname: '小赵', score: 220, avatar: avatarUrl },
  { id: 7, nickname: '小陈', score: 200, avatar: avatarUrl },
  { id: 8, nickname: '小孙', score: 180, avatar: avatarUrl },
  { id: 9, nickname: '小周', score: 160, avatar: avatarUrl },
  { id: 10, nickname: '小吴', score: 140, avatar: avatarUrl }
]
</script>

<style>
.rank-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 40rpx 20rpx;
}
.rank-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
  letter-spacing: 4rpx;
}
.rank-list {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 0;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}
.rank-item {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.rank-item:last-child {
  border-bottom: none;
}
.rank-index {
  width: 60rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #bbb;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crown {
  width: 40rpx;
  height: 40rpx;
}
.avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  border: 2rpx solid #e0e0e0;
}
.nickname {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}
.score {
  font-size: 32rpx;
  font-weight: bold;
  color: #1890ff;
}
.top1 {
  background: linear-gradient(90deg, #fffbe6 0%, #fff1b8 100%);
}
.top2 {
  background: linear-gradient(90deg, #f6faff 0%, #e6f7ff 100%);
}
.top3 {
  background: linear-gradient(90deg, #fff7f0 0%, #ffe7ba 100%);
}
</style>